<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#e91e63">
    <title>给臭宝的爱心关怀</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        :root {
            --primary-color: #e91e63;
            --secondary-color: #ff4081;
            --gradient-start: #ffafbd;
            --gradient-end: #ffc3a0;
        }
        
        body {
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
            min-height: 100vh;
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow-x: hidden;
        }
        
        .container {
            width: 100%;
            max-width: 430px;
            text-align: center;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            justify-content: center;
        }
        
        .header {
            background: rgba(255, 255, 255, 0.95);
            padding: 20px;
            border-radius: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            backdrop-filter: blur(5px);
        }
        
        h1 {
            color: var(--primary-color);
            font-size: 1.8em;
            margin-bottom: 10px;
        }
        
        .subtitle {
            color: var(--secondary-color);
            font-size: 1em;
        }
        
        .heart-container {
            position: relative;
            width: 100%;
            height: 50vh;
            min-height: 300px;
            max-height: 500px;
            margin: 10px auto;
        }
        
        .heart-piece {
            position: absolute;
            background: linear-gradient(135deg, #ff6b9d, #ff8fab);
            color: white;
            border-radius: 12px;
            padding: 10px 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            border: 2px solid white;
            text-align: center;
            font-size: clamp(11px, 3vw, 14px);
            line-height: 1.3;
            width: clamp(80px, 22vw, 110px);
            opacity: 0;
            transform: scale(0.5);
            transition: all 0.5s ease;
            word-wrap: break-word;
            overflow: hidden;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            z-index: 1;
        }
        
        .heart-piece.visible {
            opacity: 1;
            transform: scale(1);
            z-index: 2;
        }
        
        .controls {
            margin: 15px 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            padding: 0 5px;
        }
        
        button {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            border: none;
            padding: 14px 20px;
            font-size: 15px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            flex: 1;
            min-width: 110px;
            max-width: 130px;
            box-shadow: 0 3px 10px rgba(233,30,99,0.3);
            -webkit-appearance: none;
        }
        
        button:hover, button:active {
            transform: scale(0.95);
            box-shadow: 0 5px 15px rgba(233,30,99,0.4);
        }
        
        .progress-section {
            width: 100%;
            margin: 15px 0;
            padding: 0 10px;
        }
        
        .progress-bar {
            width: 100%;
            height: 18px;
            background: rgba(255,255,255,0.8);
            border-radius: 10px;
            margin: 12px 0;
            overflow: hidden;
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.1);
            border: 2px solid white;
        }
        
        .progress {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), #ff6b9d);
            border-radius: 8px;
            transition: width 0.4s ease;
        }
        
        .message-counter {
            font-size: 15px;
            color: var(--primary-color);
            margin: 10px 0;
            font-weight: bold;
            background: rgba(255,255,255,0.9);
            padding: 10px 15px;
            border-radius: 20px;
            display: inline-block;
        }
        
        .completion-section {
            margin: 20px 0;
            padding: 0 10px;
            animation: fadeInUp 0.8s ease;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .final-message {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 25px;
            border-radius: 20px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
            font-size: 15px;
            line-height: 1.5;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }
        
        .hidden {
            display: none;
        }
        
        /* 响应式设计 */
        @media (max-width: 380px) {
            .container {
                padding: 5px;
            }
            
            .header {
                padding: 15px;
            }
            
            h1 {
                font-size: 1.5em;
            }
            
            button {
                min-width: 100px;
                padding: 12px 15px;
                font-size: 14px;
            }
        }
        
        @media (min-width: 768px) {
            .container {
                max-width: 500px;
            }
            
            .heart-piece {
                width: 120px;
                font-size: 14px;
                padding: 12px 8px;
            }
        }
        
        /* 防止文本选择 */
        .no-select {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
</head>
<body class="no-select">
    <div class="container">
        <div class="header">
            <h1>💖 给臭宝的爱心关怀 💖</h1>
            <div class="subtitle">每条祝福都在为臭宝构建爱心...</div>
        </div>
        
        <div class="controls">
            <button onclick="startMessages()">💕 开始构建</button>
            <button onclick="pauseMessages()">⏸️ 暂停</button>
            <button onclick="resetMessages()">🔄 重置</button>
        </div>
        
        <div class="progress-section">
            <div class="message-counter" id="counter">已添加: 0/25 条祝福</div>
            <div class="progress-bar">
                <div class="progress" id="progress" style="width: 0%"></div>
            </div>
        </div>
        
        <div class="heart-container" id="heartContainer">
            <!-- 心形碎片位置将通过JavaScript动态创建 -->
        </div>
        
        <div id="completionSection" class="completion-section hidden">
            <div class="final-message">
                <h3 style="margin-bottom: 12px; font-size: 1.2em;">🎉 给臭宝的爱心构建完成！</h3>
                <p>25条祝福汇聚成这颗完整的心</p>
                <p>每一句都是我对臭宝真挚的爱意 💝</p>
                <p style="margin-top: 12px; font-size: 0.9em; opacity: 0.9;">永远爱臭宝的...</p>
            </div>
        </div>
    </div>

    <script>
        // 关怀消息库 - 专属臭宝版本
        const messages = [
            "臭宝开心吗？💕",
            "臭宝多喝水~ 🥛",
            "想臭宝呀？😊",
            "臭宝休息~ 🌸",
            "臭宝添衣服 🌈",
            "臭宝吃饭没？🍚",
            "臭宝别熬夜 🌙",
            "臭宝最棒！🌟",
            "陪臭宝 🤗",
            "臭宝幸福 😄",
            "臭宝好心情~ 💝",
            "臭宝休息下 🛋️",
            "臭宝值得 🌹",
            "想臭宝哦 📱",
            "心疼臭宝 💗",
            "臭宝最美 🎨",
            "因臭宝特别 ✨",
            "臭宝快乐 🎉",
            "永远爱臭宝 💘",
            "只选臭宝 ❤️",
            "臭宝珍贵 ⏳",
            "臭宝完整我 🌍",
            "守护臭宝 🛡️",
            "臭宝最美 😍",
            "臭宝在都美好 🌟"
        ];

        let currentIndex = 0;
        let isPlaying = false;
        let messageInterval;

        // 获取心形容器尺寸
        function getHeartContainerSize() {
            const container = document.getElementById('heartContainer');
            return {
                width: container.offsetWidth,
                height: container.offsetHeight
            };
        }

        // 生成手机端优化的心形坐标
        function getHeartPoints() {
            const size = getHeartContainerSize();
            const centerX = size.width / 2;
            const centerY = size.height / 2;
            const radius = Math.min(size.width, size.height) * 0.35;
            
            const points = [];
            const totalPoints = 25;
            
            // 生成心形曲线上的点
            for (let i = 0; i < totalPoints; i++) {
                const t = (i / totalPoints) * 2 * Math.PI;
                const x = 16 * Math.pow(Math.sin(t), 3);
                const y = 13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t);
                
                const scaledX = centerX + (x * radius) / 16;
                const scaledY = centerY - (y * radius) / 16;
                
                points.push({
                    x: scaledX,
                    y: scaledY
                });
            }
            
            return points;
        }

        // 初始化心形碎片
        function initializeHeartPieces() {
            const container = document.getElementById('heartContainer');
            container.innerHTML = '';
            
            const points = getHeartPoints();
            
            points.forEach((point, index) => {
                const piece = document.createElement('div');
                piece.className = 'heart-piece';
                piece.id = `piece-${index}`;
                piece.style.left = `${point.x}px`;
                piece.style.top = `${point.y}px`;
                piece.innerHTML = `💖`;
                container.appendChild(piece);
            });
        }

        function startMessages() {
            if (isPlaying) return;
            
            isPlaying = true;
            document.getElementById('completionSection').classList.add('hidden');
            
            messageInterval = setInterval(() => {
                if (currentIndex < messages.length) {
                    showMessage(messages[currentIndex]);
                    updateProgress();
                    currentIndex++;
                } else {
                    endMessages();
                }
            }, 1000);
        }

        function pauseMessages() {
            isPlaying = false;
            clearInterval(messageInterval);
        }

        function resetMessages() {
            pauseMessages();
            currentIndex = 0;
            initializeHeartPieces();
            document.getElementById('progress').style.width = '0%';
            document.getElementById('counter').textContent = '已添加: 0/25 条祝福';
            document.getElementById('completionSection').classList.add('hidden');
        }

        function showMessage(message) {
            if (currentIndex < getHeartPoints().length) {
                const piece = document.getElementById(`piece-${currentIndex}`);
                piece.textContent = message;
                piece.classList.add('visible');
                
                const colors = [
                    'linear-gradient(135deg, #ff6b9d, #ff8fab)',
                    'linear-gradient(135deg, #ff8fab, #ffa7b6)',
                    'linear-gradient(135deg, #ff4081, #ff6b9d)',
                    'linear-gradient(135deg, #e91e63, #ff4081)'
                ];
                piece.style.background = colors[Math.floor(Math.random() * colors.length)];
            }
            
            document.getElementById('counter').textContent = `已添加: ${currentIndex + 1}/25 条祝福`;
        }

        function updateProgress() {
            const progress = ((currentIndex + 1) / messages.length) * 100;
            document.getElementById('progress').style.width = `${progress}%`;
        }

        function endMessages() {
            pauseMessages();
            setTimeout(() => {
                document.getElementById('completionSection').classList.remove('hidden');
                
                document.getElementById('completionSection').scrollIntoView({ 
                    behavior: 'smooth',
                    block: 'center'
                });
                
                document.getElementById('counter').innerHTML = 
                    '<span style="color: #e91e63;">🎊 给臭宝的爱心完成！ 💝</span>';
            }, 600);
        }

        // 页面加载时初始化
        window.addEventListener('DOMContentLoaded', function() {
            initializeHeartPieces();
            
            window.addEventListener('resize', function() {
                setTimeout(initializeHeartPieces, 100);
            });
            
            // 移动端触摸优化
            document.addEventListener('touchstart', function() {}, {passive: true});
        });
    </script>
</body>
</html>